import React from 'react'
import styles from './ShoppingCart.module.css'
import {  FiShoppingCart } from 'react-icons/fi'
import {appContext} from "../appState";

interface Props {

}
interface State {
    isOpen:Boolean
}
class ShoppingCart extends React.Component<Props,State>{
    constructor(props:Props) {
        super(props);
        this.state = {
            isOpen: true
        }
    }

    render(){
        return (
            <appContext.Consumer>
                {
                    (value)=>(
                        <div className={styles.cartContainer}>
                            <button
                                onClick={(e)=>{
                                    // console.log(e.target) // 事件发生的元素
                                    // console.log(e.currentTarget) // 事件处理绑定的元素

                                    if( (e.target as HTMLElement).nodeName === 'SPAN' ){
                                        this.setState({
                                            isOpen:!this.state.isOpen
                                        })
                                    }
                                }}
                                className={styles.button}>
                                <FiShoppingCart /><span>购物车 {value.shoppingCart.items.length} （件）</span> </button>
                            <div className={styles.cartDropDown}
                                 style={{
                                     display:this.state.isOpen ? 'block' :'none'
                                 }}
                            >
                                <ul>
                                    {
                                        value.shoppingCart.items.map((res)=><li key={res.id}>{res.name}</li>)
                                    }
                                </ul>
                            </div>
                        </div>
                    )
                }
            </appContext.Consumer>
        )
    }
}

export default ShoppingCart